<template>
  <section class="container">
    <div class="banner-container">
      <el-row
        type="flex"
        justify="center"
        align="top"
      >
        <el-col
          :span="12"
          :push="4"
        >
          <div class="iphone">
            <img
              src="https://stavebox.oss-cn-beijing.aliyuncs.com/SomeLabel/zsjh_index.png"
              alt=""
            >
          </div>
        </el-col>
        <el-col
          :span="12"
          style="padding-top: 120px"
        >
          <p class="title">Don't starve Encyclopedia & community.</p>
          <figure class="qr-code">
            <a href="https://stavebox.oss-cn-beijing.aliyuncs.com/SomeLabel/__W2A__www.fireleaves.cn_1208202141.apk">
              <div class="upload">下载安卓版掌上饥荒</div>
            </a>
            <div
              class="upload"
              @click="scrollBottom"
            >其它版本下载</div>
          </figure>
        </el-col>
      </el-row>
    </div>

    <el-row class="intro">
      <h1>
        全 & 美
      </h1>
      <p>
        百科数据包含DS、ROG、DST、SW、Hamlet等5个版本<br>
        精细的设计，极致的工匠精神
      </p>
    </el-row>
    <el-row
      type="flex"
      justify="center"
      class="intro-container"
    >
      <el-col :span="18">
        <el-carousel
          :interval="4000"
          type="card"
          height="350px"
        >
          <el-carousel-item
            v-for="item in bannerImg"
            :key="item"
          >
            <img
              :src="item"
              alt=""
            >
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>

    <div class="developer-intro">
      <el-row>
        <el-col :span="9">
          <h1>
            Our
            <span style="font-weight: 600">Team</span>
          </h1>
        </el-col>
        <el-col :span="10">
          <p class="intro-p">{{ intro }}</p>
          <section>
            <i>{{ motto }}</i>
            <p style="text-align: right">—— {{ name }}</p>
          </section>
        </el-col>
      </el-row>
      <el-row
        :gutter="20"
        type="flex"
        justify="center"
        style="margin-top: 94px"
      >
        <el-col
          v-for="(item,index) in team"
          :key="index"
          :span="3"
        >
          <figure class="team-avater">
            <img
              :src="item.imgSrc"
              alt=""
              width="136"
              @click="changeIntro(index)"
            >
          </figure>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <div
            class="join-us"
            @click="open"
          >Join Us ⟶</div>
        </el-col>
      </el-row>
    </div>

    <el-row
      id="download"
      class="download-container"
      type="flex"
      justify="center"
      align="top"
    >
      <el-col :span="6">
        <h1 class="black-font">DownLoad</h1>
      </el-col>
      <el-col
        :span="9"
        class="download-right"
      >
        <ul>
          <li
            v-for="(item,index) in downloadArr1"
            :key="index"
          >
            <el-row
              type="flex"
              justify="start"
            >
              <svg
                class="icon svg-24"
                aria-hidden="true"
              >
                <use :xlink:href="'#' + item.icon" />
              </svg>
              <el-col>
                <i>
                  <a :href="item.link">
                    {{ item.link }}
                  </a>
                </i>
                <h3>{{ item.name }}</h3>
                <p>{{ item.intro }}</p>
              </el-col>
            </el-row>
          </li>
        </ul>
      </el-col>
      <el-col
        :span="9"
        class="download-right"
      >
        <ul>
          <li
            v-for="(item,index) in downloadArr2"
            :key="index"
          >
            <el-row
              type="flex"
              justify="start"
            >
              <svg
                class="icon svg-24"
                aria-hidden="true"
              >
                <use :xlink:href="'#' + item.icon" />
              </svg>
              <el-col>
                <i>
                  <a
                    :href="item.link"
                    target="view_window"
                  >
                    {{ item.link }}
                  </a>
                </i>
                <h3>{{ item.name }}</h3>
                <p>{{ item.intro }}</p>
              </el-col>
            </el-row>
          </li>
        </ul>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import Logo from '~/components/Logo.vue'
import { MessageBox } from 'element-ui'
export default {
  components: {
    Logo,
  },
  data() {
    return {
      intro: '掌上饥荒开发者，完美主义者，对于UI有狂热的偏执。',
      motto: '“叩首问路，码梦为生。”',
      name: 'Mr火叶',
      team: [
        {
          name: 'Mr火叶',
          intro: '掌上饥荒开发者，完美主义，对于UI有狂热的偏执。',
          motto: '“叩首问路，码梦为生。”',
          imgSrc:
            'https://stavebox.oss-cn-beijing.aliyuncs.com/SomeLabel/IMG_20180317_114202F.jpg',
        },
        {
          name: 'tpxxn',
          intro: '饥荒百科全书开发者',
          motto: '“想法决定我们的生活，有什么样的想法，就有什么样的未来。”',
          imgSrc:
            'https://stavebox.oss-cn-beijing.aliyuncs.com/SomeLabel/QQ%E5%9B%BE%E7%89%8720190103160948.jpg',
        },
        {
          name: '熬夜没精神',
          intro: '数据运维',
          motto: '即使是游戏也需要学习',
          imgSrc:
            'https://stavebox.oss-cn-beijing.aliyuncs.com/SomeLabel/diannai.jpg',
        },
        {
          name: 'jk8844',
          intro: '数据运维',
          motto: '不要放过每一次的一时兴起',
          imgSrc:
            'https://stavebox.oss-cn-beijing.aliyuncs.com/SomeLabel/WechatIMG3.jpeg',
        },
        {
          name: '铁锤妹妹喵～',
          intro: '数据运维',
          motto: '不以物喜，不以己悲。严于律己，宽以待人。',
          imgSrc:
            'https://stavebox.oss-cn-beijing.aliyuncs.com/SomeLabel/WechatIMG2.jpeg',
        },
      ],
      bannerImg: [
        'https://stavebox.oss-cn-beijing.aliyuncs.com/SomeLabel/%E9%B9%BF%E7%8F%AD%E8%AE%BE%E8%AE%A1-570x350-201901031539.png',
        'https://stavebox.oss-cn-beijing.aliyuncs.com/SomeLabel/%E9%B9%BF%E7%8F%AD%E8%AE%BE%E8%AE%A1-570x350-201901031548.png',
        'https://stavebox.oss-cn-beijing.aliyuncs.com/SomeLabel/%E9%B9%BF%E7%8F%AD%E8%AE%BE%E8%AE%A1-570x350-201901031557.png',
      ],
      downloadArr1: [
        {
          icon: 'icon-gugeliulanqi',
          link: 'https://www.fireleaves.cn',
          name: '掌上饥荒',
          intro: '掌上饥荒是一款WebApp，可以无需下载，直接在浏览器中访问',
        },
        {
          icon: 'icon-xiaochengxuicon',
          link: 'https://www.fireleaves.cn',
          name: '掌上饥荒小程序',
          intro:
            '为了方便不太喜欢下载太多应用的用户，我们也做了QQ小程序和微信小程序，QQ或微信小程序搜索界面搜索掌上饥荒即可',
        },
        {
          icon: 'icon-anzhuo',
          link: 'https://www.fireleaves.cn',
          name: '掌上饥荒安卓',
          intro:
            '使用App的用户可获得更好的使用体验，我们的应用是热更新，下载过后无需手动下载',
        },
      ],
      downloadArr2: [
        {
          icon: 'icon-ios1',
          link: 'https://www.fireleaves.cn',
          name: '掌上饥荒Ios',
          intro:
            '由于AppStore的政策，我们不再提供IOS安装包，ios用户可以使用qq小程序或微信小程序',
        },
        {
          icon: 'icon-windows',
          link: 'http://www.jihuangbaike.com/',
          name: '饥荒百科全书',
          intro:
            '习惯使用PC的用户，推荐使用饥荒百科全书，百科全书的资料非常齐全，点击上面的链接即可。',
        },
      ],
    }
  },
  mounted() {
    let devices = ['iPhone', 'Android', 'Windows Phone']
    let ua = window.navigator.userAgent
    for (var i = 0; i < devices.length; i++) {
      if (ua.indexOf(devices[i]) != -1) {
        window.location.href = 'http://www.fireleaves.cn'
      }
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    changeIntro(index) {
      this.motto = this.team[index].motto
      this.name = this.team[index].name
      this.intro = this.team[index].intro
    },
    /**
     * 滚动到下载的地方
     */
    scrollBottom() {
      let container = this.$el.querySelector('#download')
      container.scrollIntoView()
    },
    open() {
      const h = this.$createElement
      MessageBox({
        title: '加入我们',
        message: h('div', null, [
          h(
            'p',
            null,
            '我们的愿景是提供最好的饥荒百科资料服务。如果你是饥荒资深玩家，对一些游戏机制谙熟于心。欢迎加入我们，咱们一起把百科资料做好。 '
          ),
          h('div', null, [
            h('p', null, '联系方式 ：'),
            h('p', { style: 'color: teal' }, 'QQ : 535700846'),
            h('p', { style: 'color: teal' }, '微信 : 18571531064'),
          ]),
        ]),
        confirmButtonText: '确定',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/golbal.scss';
.container {
  position: relative;
  min-height: 100vh;
  text-align: center;

  .banner-container {
    position: relative;
    padding: 48px 0 48px 0;
    height: 110vh;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: -200px;
      width: 120%;
      height: 100%;
      background: linear-gradient(80deg, #510fa8 0, #320fa8 100%);
      transform: rotate(-8deg);
      border-radius: 36px;
    }
  }

  h1 {
    text-align: left;
    font-size: 48px;
    color: #fff;
    font-weight: 800;
  }

  .title {
    width: 80%;
    text-align: left;
    font-size: 48px;
    color: #fff;
    font-family: 'Poiret One', cursive;
  }

  .slogan {
    margin-top: 24px;
    color: #fff;
    text-align: left;
    font-size: 24px;
    font-weight: 300;
  }

  .iphone {
    position: relative;
    height: 754px;
    width: 374px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(https://stavebox.oss-cn-beijing.aliyuncs.com/SomeLabel/iphone_6_plus_black_port.png);

    img {
      position: absolute;
      top: 11.58%;
      bottom: 11.58%;
      left: 5.97%;
      right: 5.97%;
      width: 329px;
    }
  }

  .qr-code {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    margin-top: 24px;
    padding: 0;
  }

  .intro {
    margin-top: 42px;

    h1 {
      font-size: 24px;
      font-weight: 400;
      color: $black-font;
      text-align: center;
    }

    p {
      margin-top: 18px;
      color: $common-font;
      font-size: 14px;
      font-weight: 300;
      letter-spacing: 2px;
      line-height: 2.5;
    }
  }

  .intro-container {
    margin-top: 90px;
    margin-bottom: 90px;
    width: 100%;
    overflow: hidden;

    p {
      padding: 18px;
      color: $common-font;
      line-height: 1.7;
      letter-spacing: 4px;
      text-align: justify;
      font-weight: 300;

      span {
        font-size: 24px;
        font-weight: 600;
        color: $common-font;
      }
    }

    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }

  .btn-sty {
    padding: 12px 28px 12px 28px;
    font-size: 14px;
    color: #fff;
    letter-spacing: 2px;
    background-color: #7952b3;

    &:hover {
      background-color: #9557d4;
    }
  }

  .developer-intro {
    padding: 94px;
    min-height: 80vh;
    background-color: #fafbfe;

    h1 {
      font-size: 36px;
      color: #333333;
      font-family: 'Poiret One', cursive;
      text-align: right;
      font-weight: 300;
    }

    .intro-p {
      position: relative;
      margin-left: 32px;
      min-height: 64px;
      font-size: 14px;
      font-weight: 300;
      color: #212121;
      text-align: left;
      letter-spacing: 2px;
      line-height: 1.7;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: -6px;
        width: 32px;
        height: 1px;
        background: #212121;
      }
    }

    section {
      display: inline-block;
      width: 100%;
      margin-left: 32px;
      margin-top: 24px;
      font-size: 14px;
      color: $common-font;
      text-align: left;

      i {
        letter-spacing: 2px;
      }

      p {
        margin-top: 12px;
        text-align: right;
      }
    }
  }

  .team-avater {
    margin: 0 auto;
    width: 136px;
    height: 136px;
    border-radius: 50%;
    overflow: hidden;

    img {
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }

    img:hover {
      transform: scale(1.2);
    }
  }

  .join-us {
    display: inline-block;
    margin-top: 64px;
    padding: 12px 48px 12px 48px;
    border: 2px solid #212121;
    color: #212121;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 4px;
    font-family: 'Poiret One', cursive;
  }

  .download-container {
    padding: 94px;
    text-align: left;

    ul li {
      margin-bottom: 48px;
      list-style: none;
    }
    ul li:nth-last-child(1) {
      margin-bottom: 0;
    }
    h3 {
      font-size: 18px;
      color: #333333;
      letter-spacing: 2px;
    }

    i a {
      margin-bottom: 4px;
      font-size: 12px;
      color: #666666;
      text-decoration: none;
    }

    p {
      min-height: 65px;
      margin-top: 16px;
      font-size: 14px;
      color: #666666;
      letter-spacing: 2px;
      line-height: 1.5;
    }

    .svg-24 {
      margin-right: 32px;
      width: 60px;
      height: 60px;
      color: #212121;
    }

    .download-right {
      margin-left: 80px;
    }

    .black-font {
      font-size: 36px;
      color: #212121;
      text-align: right;
      font-family: 'Poiret One', cursive;
    }
  }
  .upload {
    position: relative;
    z-index: 10;
    display: inline-block;
    margin-top: 64px;
    margin-right: 16px;
    padding: 12px 48px 12px 48px;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 4px;
    border-radius: 4px;
    &:hover {
      background-color: white;
      color: #212121;
    }
  }
}
</style>
